<!--
  * @Author: zhw 443844039@qq.com
  * @Date: 2025-08-23 19:51:13
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-24 22:56:37
  * @Description: 教学成就
 -->
<template>
  <div id="researchChart" ref="researchChart" class="chart-container"></div>
</template>

<script>
import * as echarts from 'echarts'
import { teachingAchievementsApi } from '@/api/LeadershipCockpit/index'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.researchChart)
      teachingAchievementsApi().then(res => {
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            y:'bottom',
          },
          xAxis: {
            type: 'category',
            data: res.data.yearList
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: `{value}个`
            }
          },
          series: [
            {
              name:'国家级成就',
              data: res.data.countryList,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#F6BD16'
              }
            },
            {
              name:'省级成就',
              data: res.data.provinceList,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#5D7092'
              }
            },
            {
              name:'市级成就',
              data: res.data.cityList,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#5AD8A6'
              }
            },
            {
              name:'技能大赛',
              data: res.data.schoolList,
              type: 'line',
              smooth: true,
              itemStyle: {
                color: '#5B8FF9'
              }
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.container{
  margin: 12px;
}

.header {
  margin-bottom: 12px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.chart-container {
  width: 100%;
  height: 400px;
}
</style>